﻿<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>列表组 &middot; BootstrapVue</title>
<!-- Bootstrap 核心CSS -->
<link href="../../../v4/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../../../v4/assets/css/docsearch.min.css" rel="stylesheet">
<link href="../../../v4/assets/css/docs.min.css" rel="stylesheet">
<link href="../../style/bv_path.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link data-n-head="ssr" rel="manifest" href="../../manifest.json">
<link data-n-head="ssr" rel="shortcut icon" href="../../style/icons/icon_64.png">
<link data-n-head="ssr" rel="apple-touch-icon" href="../../style/icons/icon_512.png" sizes="512x512">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../">首页</a></li>
      <li class="nav-item"><a class="nav-link" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link active" href="../components">组件</a></li>
      <li class="nav-item"><a class="nav-link " href="../directives">指令</a></li>
      <li class="nav-item"><a class="nav-link " href="../reference">参考</a></li>
      <li class="nav-item"><a class="nav-link " href="https://bootstrap-vue.org/play" target="_blank">体验</a></li>
      <li class="nav-item"><a class="nav-link " href="http://code.z01.com/v4"><i class="zi zi_bold" zico="粗"></i> Boostrap</a></li>
      <li class="nav-item"><a class="nav-link" href="http://ico.z01.com" target="_blank" rel="noopener">zico图标系统</a></li>
      <li class="nav-item"><a class="nav-link" href="http://www.z01.com" target="_blank" rel="noopener">Zoomla!逐浪CMS</a></li>
    </ul>
  </div>
  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="alse"> v2.12.0 </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 
        <a class="dropdown-item active" href="../../../bootstrap-vue/docs/4.0/">Latest (4.3.x)</a>
        <a class="dropdown-item" href="/Boot/">v3.3.7</a>
        <a class="dropdown-item" href="/Sass/">Sass语言</a>
        <a class="dropdown-item" href="/Emmet/">Emmet语法</a>
        <a class="dropdown-item" href="//www.z01.com/tool/" target="_blank">IIS站长工具</a>
        <a class="dropdown-item" href="//ad.z01.com/" target="_blank">广告源码</a>
        <a class="dropdown-item" href="//v.z01.com/mb/" target="_blank">免费模板</a>
        <a class="dropdown-item" href="//v.z01.com/" target="_blank">H5移动创作</a>
        <a class="dropdown-item" href="//www.z01.com/help/web/3234.shtml" target="_blank">Flexbox布局</a>
		<a class="dropdown-item" href="/boot/font.html" target="_blank">Font Awesome</a>
</div>
    </li>
    <li class="nav-item"> <a class="nav-link p-2" href="//zoomla.github.io/bootstrap4-zhcn-documentation" target="_blank" rel="noopener" aria-label="GitHub">
      <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
        <title>GitHub</title>
        <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/>
      </svg>
      </a> </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/blog/ren/3214.shtml" target="_blank" rel="noopener" aria-label="Slack">译者说</a></li>
  </ul>
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <form class="bd-search d-flex align-items-center">
        <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
        <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
          <title>Menu</title>
          <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/>
        </svg>
        </button>
      </form>


<nav class="collapse bd-links" id="bd-docs-nav">
<div class=""><a href="../" class="bd-toc-link">首页</a></div>
<div class="bd-toc-item nuxt-link-exact-active "><a href="../../../bootstrap-vue/docs/" class="bd-toc-link  "> 起步 </a>
<ul class="nav bd-sidenav">
</ul>
</div>
<div class="bd-toc-item active"><a href="../../../bootstrap-vue/docs/components/" class="bd-toc-link nuxt-link-exact-active"> 组件 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/index.html" class="nav-link"> 组件目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/alert.html" class="nav-link"> 警告提示框(Alert) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 徽章(Badge) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 面包屑导航(Breadcrumb) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button.html" class="nav-link"> 按钮(Button) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-group.html" class="nav-link"> 按钮组(Button Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-toolbar.html" class="nav-link"> 按钮Toolbar(Button Toolbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/calendar.html" class="nav-link"> 日历组件(Calendar) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/card.html" class="nav-link"> 卡片(Card) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/carousel.html" class="nav-link"> 轮播效果(Carousel) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/collapse.html" class="nav-link"> 折叠面板(Collapse) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/dropdown.html" class="nav-link"> 下拉菜单(Dropdown) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/embed.html" class="nav-link"> 嵌入(Embed) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form.html" class="nav-link"> 表单(Form) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-checkbox.html" class="nav-link"> 表单复选框(Form Checkbox) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-datepicker.html" class="nav-link"> 表单时间选择器(Form Datepicker) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-file.html" class="nav-link"> 文件选择(Form File) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-group.html" class="nav-link"> 表单组合(Form Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-input.html" class="nav-link"> 表单输入框(Form Input) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-radio.html" class="nav-link"> 单选择表单Form Radio </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-select.html" class="nav-link"> 下拉式表单(Form Select) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-spinbutton.html" class="nav-link"> 按钮式表单(Form Spinbuttno) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-tags.html" class="nav-link"> Tags表单选择器(Form Tags) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-textarea.html" class="nav-link"> 文本框(Form Textarea) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-timepicker.html" class="nav-link"> 表单内时间控件(Form Timepicker) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/image.html" class="nav-link"> 图片(Image) </a></li>

<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/input-group.html" class="nav-link"> 输入框(Input Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/jumbotron.html" class="nav-link"> Hero大块屏(Jumbotron) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/layout.html" class="nav-link"> 布局与网络Layout and Grid System </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/link.html" class="nav-link"> 链接(Link)</a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/components/list-group.html" class="nav-link"> 列表组(List group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/media.html" class="nav-link"> 媒体(Media) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/modal.html" class="nav-link"> 弹出模态框(Modal) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/nav.html" class="nav-link"> 导航(Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/navbar.html" class="nav-link"> 导航栏(Navbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination.html" class="nav-link"> 分页(Pagination) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav.html" class="nav-link"> 分页导航(Pagination Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/popover.html" class="nav-link"> 指示备注(Popover) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/progress.html" class="nav-link"> 进度指示器(Progress) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/spinner.html" class="nav-link"> 旋转指示器(Spinner) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/table.html" class="nav-link"> 表格(Table) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tabs.html" class="nav-link"> 选项卡(Tabs) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/time.html" class="nav-link"> 时间组件(Time) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/toast.html" class="nav-link"> 冒泡推送(Toasts) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tooltip.html" class="nav-link"> tip提示组件(Tooltip) </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/directives/" class="bd-toc-link"> 指令 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/index.html" class="nav-link"> 指令目录 </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/directives/hover.html" class="nav-link"> Hover 指令<small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/popover.html" class="nav-link"> Popover 提示备注</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/scrollspy.html" class="nav-link"> Scrollspy 滚动监听</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/tooltip.html" class="nav-link"> Tooltip 提示指令</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/visible.html" class="nav-link"> Visible 可见性操作<small class="badge text-uppercase badge-success">New</small> </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/icons.html" class="bd-toc-link"> Icons图标</a>
<ul class="nav bd-sidenav">
</ul>
</div>
  
<div class="bd-toc-item"><a class="bd-toc-link" href="../../../bootstrap-vue/docs/reference">参考</a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference" class="nav-link.html"> 参考目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/accessibility.html" class="nav-link">友好访问</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/color-variants.html" class="nav-link">Color颜色变量 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/images.html" class="nav-link"> 组件图像img的src路径解析</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/router-links.html" class="nav-link"> Router路由支持 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/size-props.html" class="nav-link">大小规格</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/spacing-classes.html" class="nav-link">间距处理</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/starter-templates.html" class="nav-link">开始模板</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/theming.html" class="nav-link">主题色彩</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/utility-classes.html" class="nav-link">通用Class类</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/validation.html" class="nav-link">Form表单验证</a></li>
</ul>
</div>
<div class=""><a href="https://bootstrap-vue.org/play" class="bd-toc-link" target="_blank">在线模拟器</a></div>
</nav>
</div>

<div class="d-none d-xl-block col-xl-2 bd-toc">
<li class="nav-item toc-entry mb-2"><a target="_self" href="#list-group" class="nav-link font-weight-bold"><span>列表组(List group)</span></a></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#active-items" class="nav-link"><span>active 项</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#disabled-items" class="nav-link"><span>disabled 项</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#actionable-list-group-items" class="nav-link"><span>可操作列表组项</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#contextual-variants" class="nav-link"><span>上下文对象</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#conveying-meaning-to-assistive-technologies" class="nav-link"><span>向辅助技术传达意义</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#with-badges" class="nav-link"><span>具有标识</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#list-groups-inside-cards" class="nav-link"><span>cards内的组列表</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#horizontal-list-groups" class="nav-link"><span>水平列表组</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#custom-content" class="nav-link"><span>自定义内容</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#component-reference" class="nav-link"><span>组件引用</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-list-group" class="nav-link"><span>&lt;b-list-group&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-list-group-item" class="nav-link"><span>&lt;b-list-group-item&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-individual-components" class="nav-link"><span>导入单个组件</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-as-a-plugin" class="nav-link"><span>作为Vue.js插件导入</span></a></li>
</ul>
</li>
</ul>
</div>

<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">

<nav data-v-aafc4aea="" aria-label="Breadcrumbs" class="float-left mt-2 mb-0 mb-lg-2">
<ol data-v-aafc4aea="" class="breadcrumb d-inline-flex bg-transparent px-2 py-1 my-0">
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../" class="nuxt-link-active" target="_self">首页</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs" class="nuxt-link-active" target="_self">中文手册</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs/components/" class="nuxt-link-active" target="_self">组件</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item active"><span data-v-aafc4aea="" aria-current="location">列表组</span></li>
</ol>
</nav>
<div class="clearfix d-block"></div>
  <h1 class="bd-title" id="content">列表组(List group)</h1>
<p class="bd-lead">
  列表组是显示一系列内容的灵活而强大的组件。可以修改列表组项以支持其中的任何内容。它们也可以通过各种属性作为导航。
</p>
  <script type="text/javascript" src="../../../v4/assets/js/pupCMS.js"></script>





<nav class="bd-quick-links mb-3 d-xl-none" data-v-811345e6="">
<header data-v-811345e6="">
<button data-v-811345e6="" type="button" class="btn font-weight-bold btn-outline-secondary btn-sm btn-block collapsed" aria-controls="bd-quick-links-collapse" aria-expanded="false"><span data-v-811345e6="">Show</span> page table of contents </button>
</header>
<ul data-v-811345e6="" id="bd-quick-links-collapse" class="collapse" style="display: none;">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#active-items" class=""><span data-v-811345e6="">Active items</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#disabled-items" class=""><span data-v-811345e6="">Disabled items</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#actionable-list-group-items" class=""><span data-v-811345e6="">Actionable list group items</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#contextual-variants" class=""><span data-v-811345e6="">Contextual variants</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#conveying-meaning-to-assistive-technologies" class=""><span data-v-811345e6="">Conveying meaning to assistive technologies</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#with-badges" class=""><span data-v-811345e6="">With badges</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#list-groups-inside-cards" class=""><span data-v-811345e6="">List groups inside cards</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#horizontal-list-groups" class=""><span data-v-811345e6="">Horizontal list groups</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#custom-content" class=""><span data-v-811345e6="">Custom content</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#component-reference" class=""><span data-v-811345e6="">Component reference</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-list-group" class=""><span data-v-811345e6="">&lt;b-list-group&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-list-group-item" class=""><span data-v-811345e6="">&lt;b-list-group-item&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-individual-components" class=""><span data-v-811345e6="">Importing individual components</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-as-a-plugin" class=""><span data-v-811345e6="">Importing as a Vue.js plugin</span></a></li>
</ul>
</li>
</ul>
</nav>
<div translate="translate" class="bd-example vue-example vue-example-b-list-group notranslate">
<div class="list-group">
<div class="list-group-item">Cras justo odio</div>
<div class="list-group-item">Dapibus ac facilisis in</div>
<div class="list-group-item">Morbi leo risus</div>
<div class="list-group-item">Porta ac consectetur ac</div>
<div class="list-group-item">Vestibulum at eros</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-list-group</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span>&gt;</span>Cras justo odio<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span>&gt;</span>Dapibus ac facilisis in<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span>&gt;</span>Morbi leo risus<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span>&gt;</span>Porta ac consectetur ac<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span>&gt;</span>Vestibulum at eros<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group</span>&gt;</span></pre></figure>
<h2 id="active-items" class="bv-no-focus-ring"><span class="bd-content-title">active 项<a class="anchorjs-link" href="#active-items" aria-labelledby="active-items"></a></span></h2>
<p>
  在<code translate="no" class="notranslate text-nowrap">&lt;b-list-group-item&gt;</code>上设置<code translate="no" class="notranslate text-nowrap">active</code>属性以指示当前的active选择。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-list-group-active notranslate">
<div class="list-group">
<div class="list-group-item">Cras justo odio</div>
<div class="list-group-item active">Dapibus ac facilisis in</div>
<div class="list-group-item">Morbi leo risus</div>
<div class="list-group-item">Porta ac consectetur ac</div>
<div class="list-group-item">Vestibulum at eros</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-list-group</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span>&gt;</span>Cras justo odio<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">active</span>&gt;</span>Dapibus ac facilisis in<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span>&gt;</span>Morbi leo risus<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span>&gt;</span>Porta ac consectetur ac<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span>&gt;</span>Vestibulum at eros<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group</span>&gt;</span></pre></figure>
<h2 id="disabled-items" class="bv-no-focus-ring"><span class="bd-content-title">disabled 项<a class="anchorjs-link" href="#disabled-items" aria-labelledby="disabled-items"></a></span></h2>
<p>
  在<code translate="no" class="notranslate text-nowrap">&lt;b-list-group-item&gt;</code>上设置<code translate="no" class="notranslate text-nowrap">disabled</code>属性，使其显示为disabled（也适用于actionalable项）。见下文）。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-list-group-disabled notranslate">
<div class="list-group">
<div class="list-group-item disabled">Cras justo odio</div>
<div class="list-group-item">Dapibus ac facilisis in</div>
<div class="list-group-item">Morbi leo risus</div>
<div class="list-group-item disabled">Porta ac consectetur ac</div>
<div class="list-group-item">Vestibulum at eros</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-list-group</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">disabled</span>&gt;</span>Cras justo odio<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span>&gt;</span>Dapibus ac facilisis in<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span>&gt;</span>Morbi leo risus<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">disabled</span>&gt;</span>Porta ac consectetur ac<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span>&gt;</span>Vestibulum at eros<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group</span>&gt;</span></pre></figure>
<h2 id="actionable-list-group-items" class="bv-no-focus-ring"><span class="bd-content-title">可操作列表组项<a class="anchorjs-link" href="#actionable-list-group-items" aria-labelledby="actionable-list-group-items"></a></span></h2>
<p>
  将<code translate="no" class="notranslate text-nowrap">&lt;b-list-group-item&gt;</code>指定为一个可操作的链接
  （<code translate="no" class="notranslate text-nowrap">&lt;a href="..."&gt;</code>），方法是将a<b-list-group-item>指定为一个<code translate="no" class="notranslate text-nowrap">href</code>属性
    或<a href="../../../bootstrap-vue/docs/reference/router-links" class="font-weight-bold">router-link</a> 
    <code translate="no" class="notranslate text-nowrap">to</code>属性。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-list-group-link notranslate">
<div class="list-group"><a target="_self" href="#some-link" class="list-group-item list-group-item-action">Awesome link</a> <a target="_self" href="#" class="list-group-item active list-group-item-action active">Link with active state</a> <a target="_self" href="#" class="list-group-item list-group-item-action">Action links are easy</a> <a target="_self" tabindex="-1" aria-disabled="true" href="#foobar" class="list-group-item disabled list-group-item-action disabled">Disabled link</a></div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-list-group</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#some-link"</span>&gt;</span>Awesome link<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">active</span>&gt;</span>Link with active state<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Action links are easy<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#foobar"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled link<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group</span>&gt;</span></pre></figure>
<p>
  或者如果您更喜欢<code translate="no" class="notranslate text-nowrap">&lt;button&gt;</code>元素而不是链接，请将<code translate="no" class="notranslate text-nowrap">button</code>属性
  设置为<code translate="no" class="notranslate text-nowrap">true</code>。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-list-group-button notranslate">
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action">Button item</button>
<button type="button" class="list-group-item list-group-item-action">I am a button</button>
<button type="button" disabled="disabled" class="list-group-item list-group-item-action disabled">Disabled button</button>
<button type="button" class="list-group-item list-group-item-action">This is a button too</button>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-list-group</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">button</span>&gt;</span>Button item<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">button</span>&gt;</span>I am a button<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">button</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled button<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">button</span>&gt;</span>This is a button too<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group</span>&gt;</span></pre></figure>
<p><strong>注意事项:</strong></p>
<ul>
<li>
  当属性<code translate="no" class="notranslate text-nowrap">button</code>为<code translate="no" class="notranslate text-nowrap">true</code>时，
  所有<a href="../../../bootstrap-vue/docs/components/link" class="font-weight-bold">与链接相关的属性</a>（<code translate="no" class="notranslate text-nowrap">active</code>属性除外）和<code translate="no" class="notranslate text-nowrap">tag</code>属性将不起作用。
</li>
<li>When <code translate="no" class="notranslate text-nowrap">href</code> or <code translate="no" class="notranslate text-nowrap">to</code> are set, the <code translate="no" class="notranslate text-nowrap">tag</code> prop has no effect.</li>
</ul>
<p>
  请参阅<a href="../../../bootstrap-vue/docs/reference/router-links" class="font-weight-bold">路由器支持</a>参考页以获取路由器链接特定的道具。
</p>
<h2 id="contextual-variants" class="bv-no-focus-ring"><span class="bd-content-title">上下文变量<a class="anchorjs-link" href="#contextual-variants" aria-labelledby="contextual-variants"></a></span></h2>
<p>
  通过code translate="no" class="notranslate text-nowrap">variant</code>属性，使用上下文变量为具有状态背景和颜色的列表项设置样式。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-list-group-variant notranslate">
<div class="list-group">
<div class="list-group-item">Default list group item</div>
<div class="list-group-item list-group-item-primary">Primary list group item</div>
<div class="list-group-item list-group-item-secondary">Secondary list group item</div>
<div class="list-group-item list-group-item-success">Success list group item</div>
<div class="list-group-item list-group-item-danger">Danger list group item</div>
<div class="list-group-item list-group-item-warning">Warning list group item</div>
<div class="list-group-item list-group-item-info">Info list group item</div>
<div class="list-group-item list-group-item-light">Light list group item</div>
<div class="list-group-item list-group-item-dark">Dark list group item</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-list-group</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span>&gt;</span>Default list group item<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Primary list group item<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"secondary"</span>&gt;</span>Secondary list group item<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"success"</span>&gt;</span>Success list group item<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"danger"</span>&gt;</span>Danger list group item<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"warning"</span>&gt;</span>Warning list group item<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"info"</span>&gt;</span>Info list group item<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"light"</span>&gt;</span>Light list group item<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"dark"</span>&gt;</span>Dark list group item<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group</span>&gt;</span></pre></figure>
<p>
  上下文变量也适用于操作项。注意这里添加的悬停样式在前面的示例中不存在。还支持<code translate="no" class="notranslate text-nowrap">active</code>状态；将其设置为指示上下文列表组项上的活动选择。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-list-group-variant-action notranslate">
<div class="list-group"><a target="_self" href="#" class="list-group-item list-group-item-action">Default list group item</a> <a target="_self" href="#" class="list-group-item list-group-item-primary list-group-item-action">Primary list group item</a> <a target="_self" href="#" class="list-group-item list-group-item-secondary list-group-item-action">Secondary list group item</a> <a target="_self" href="#" class="list-group-item list-group-item-success list-group-item-action">Success list group item</a> <a target="_self" href="#" class="list-group-item list-group-item-danger list-group-item-action">Danger list group item</a> <a target="_self" href="#" class="list-group-item list-group-item-warning list-group-item-action">Warning list group item</a> <a target="_self" href="#" class="list-group-item list-group-item-info list-group-item-action">Info list group item</a> <a target="_self" href="#" class="list-group-item list-group-item-light list-group-item-action">Light list group item</a> <a target="_self" href="#" class="list-group-item list-group-item-dark list-group-item-action">Dark list group item</a></div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-list-group</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Default list group item<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Primary list group item<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"secondary"</span>&gt;</span>Secondary list group item<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"success"</span>&gt;</span>Success list group item<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"danger"</span>&gt;</span>Danger list group item<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"warning"</span>&gt;</span>Warning list group item<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"info"</span>&gt;</span>Info list group item<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"light"</span>&gt;</span>Light list group item<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"dark"</span>&gt;</span>Dark list group item<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group</span>&gt;</span></pre></figure>
<h3 id="conveying-meaning-to-assistive-technologies" class="bv-no-focus-ring"><span class="bd-content-title">向辅助技术传达意义<a class="anchorjs-link" href="#conveying-meaning-to-assistive-technologies" aria-labelledby="conveying-meaning-to-assistive-technologies"></a></span></h3>
<p>
  使用颜色来添加含义只提供了一种视觉指示，而不会传达给辅助技术的用户，例如屏幕阅读器。确保由颜色表示的信息从内容本身（例如可见文本）中是明显的，或者通过其他方式包括在内，
  例如使用<code translate="no" class="notranslate text-nowrap">.sr-only</code>类隐藏的其他文本。
</p>
<h2 id="with-badges" class="bv-no-focus-ring"><span class="bd-content-title">具有标识<a class="anchorjs-link" href="#with-badges" aria-labelledby="with-badges"></a></span></h2>
<p>
  在某些<a href="http://getbootstrap.com/docs/4.0/utilities/flex/" target="_blank" rel="noopener">实用程序类</a>的帮助下，将<a href="../../../bootstrap-vue/docs/components/badge" class="font-weight-bold">badges</a>添加到任何列表组项以显示未读计数、活动等。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-list-group-badges notranslate">
<div class="list-group">
<div class="list-group-item d-flex justify-content-between align-items-center"> Cras justo odio <span class="badge badge-primary badge-pill">14</span></div>
<div class="list-group-item d-flex justify-content-between align-items-center"> Dapibus ac facilisis in <span class="badge badge-primary badge-pill">2</span></div>
<div class="list-group-item d-flex justify-content-between align-items-center"> Morbi leo risus <span class="badge badge-primary badge-pill">1</span></div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-list-group</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex justify-content-between align-items-center"</span>&gt;</span>
    Cras justo odio
    <span class="hljs-tag">&lt;<span class="hljs-name">b-badge</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">pill</span>&gt;</span>14<span class="hljs-tag">&lt;/<span class="hljs-name">b-badge</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex justify-content-between align-items-center"</span>&gt;</span>
    Dapibus ac facilisis in
    <span class="hljs-tag">&lt;<span class="hljs-name">b-badge</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">pill</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">b-badge</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex justify-content-between align-items-center"</span>&gt;</span>
    Morbi leo risus
    <span class="hljs-tag">&lt;<span class="hljs-name">b-badge</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">pill</span>&gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-name">b-badge</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group</span>&gt;</span></pre></figure>
<h2 id="list-groups-inside-cards" class="bv-no-focus-ring"><span class="bd-content-title">cards内的组列表<a class="anchorjs-link" href="#list-groups-inside-cards" aria-labelledby="list-groups-inside-cards"></a></span></h2>
<p>
  将列表组合并到<a href="../../../bootstrap-vue/docs/components/card" class="font-weight-bold">cards</a>中。
  当使用<code translate="no" class="notranslate text-nowrap">no-body</code>的card时，使用<code translate="no" class="notranslate text-nowrap">&lt;b-list-group&gt;</code>属性<code translate="no" class="notranslate text-nowrap">flush</code> 属性，
  使列表组的侧面与卡齐平。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-list-group-card notranslate">
<div class="card-deck">
<div class="card">
<div class="card-header">
<div>Card with list group</div>
</div>
<div class="card-body">
<div class="list-group"><a target="_self" href="#" class="list-group-item list-group-item-action">Cras justo odio</a> <a target="_self" href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a> <a target="_self" href="#" class="list-group-item list-group-item-action">Vestibulum at eros</a></div>
<p class="card-text mt-2"> Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum
      consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur
      mollit voluptate est in duis laboris ad sit ipsum anim Lorem. </p>
</div>
</div>
<div class="card">
<div class="card-header">
<div>Card with flush list group</div>
</div>
<div class="list-group list-group-flush"><a target="_self" href="#" class="list-group-item list-group-item-action">Cras justo odio</a> <a target="_self" href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a> <a target="_self" href="#" class="list-group-item list-group-item-action">Vestibulum at eros</a></div>
<div class="card-body"> Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum
      consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur
      mollit voluptate est in duis laboris ad sit ipsum anim Lorem. </div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-card-group</span> <span class="hljs-attr">deck</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">header</span>=<span class="hljs-string">"Card with list group"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Cras justo odio<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Dapibus ac facilisis in<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Vestibulum at eros<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-text mt-2"</span>&gt;</span>
      Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum
      consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur
      mollit voluptate est in duis laboris ad sit ipsum anim Lorem.
    <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">no-body</span> <span class="hljs-attr">header</span>=<span class="hljs-string">"Card with flush list group"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group</span> <span class="hljs-attr">flush</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Cras justo odio<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Dapibus ac facilisis in<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Vestibulum at eros<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-card-body</span>&gt;</span>

      Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum
      consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur
      mollit voluptate est in duis laboris ad sit ipsum anim Lorem.
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-body</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-group</span>&gt;</span></pre></figure>
<h2 id="horizontal-list-groups" class="bv-no-focus-ring"><span class="bd-content-title">水平列表组<a class="anchorjs-link" href="#horizontal-list-groups" aria-labelledby="horizontal-list-groups"></a></span></h2>
<p>
  将属性<code translate="no" class="notranslate text-nowrap">horizontal</code>设置为<code translate="no" class="notranslate text-nowrap">true</code>可在所有断点中将列表组项的布局从垂直更改为水平。
  或者，将<code translate="no" class="notranslate text-nowrap">horizontal</code>设置为响应断点（<code translate="no" class="notranslate text-nowrap">sm</code>, 
  <code translate="no" class="notranslate text-nowrap">md</code>, 
  <code translate="no" class="notranslate text-nowrap">lg</code>或
  <code translate="no" class="notranslate text-nowrap">xl</code>），以使列表组从该断点的最小宽度开始水平。当前<code translate="no" class="notranslate text-nowrap">flush</code>列表组不能与刷新列表组组合。
</p>
<p><strong>专家提示:</strong> 
  想要水平时等宽列表组项目吗？ 将class <code translate="no" class="notranslate text-nowrap">flex-fill</code>添加到每个列表组项。
</p>
<p><strong>始终水平:</strong></p>
<div translate="translate" class="bd-example vue-example vue-example-b-list-group-horizontal notranslate">
<div>
<div class="list-group list-group-horizontal">
<div class="list-group-item">Cras justo odio</div>
<div class="list-group-item">Dapibus ac facilisis in</div>
<div class="list-group-item">Morbi leo risus</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group</span> <span class="hljs-attr">horizontal</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span>&gt;</span>Cras justo odio<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span>&gt;</span>Dapibus ac facilisis in<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span>&gt;</span>Morbi leo risus<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p><strong>
  在断点<code translate="no" class="notranslate text-nowrap">md</code>及以上的水平：
  </strong></p>
<div translate="translate" class="bd-example vue-example vue-example-b-list-group-horizontal-md notranslate">
<div>
<div class="list-group list-group-horizontal-md">
<div class="list-group-item">Cras justo odio</div>
<div class="list-group-item">Dapibus ac facilisis in</div>
<div class="list-group-item">Morbi leo risus</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group</span> <span class="hljs-attr">horizontal</span>=<span class="hljs-string">"md"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span>&gt;</span>Cras justo odio<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span>&gt;</span>Dapibus ac facilisis in<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span>&gt;</span>Morbi leo risus<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h2 id="custom-content" class="bv-no-focus-ring"><span class="bd-content-title">自定义内容<a class="anchorjs-link" href="#custom-content" aria-labelledby="custom-content"></a></span></h2>
<p>
  在<a href="../../../bootstrap-vue/docs/reference/utility-classes" class="font-weight-bold">flexbox实用程序类</a>的帮助下，添加几乎所有的HTML或组件，即使是像下面这样的链接列表组。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-list-group-content notranslate">
<div class="list-group"><a target="_self" href="#" class="list-group-item flex-column align-items-start active list-group-item-action active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small></div>
<p class="mb-1"> Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. </p>
<small>Donec id elit non mi porta.</small></a> <a target="_self" href="#" class="list-group-item flex-column align-items-start list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small></div>
<p class="mb-1"> Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. </p>
<small class="text-muted">Donec id elit non mi porta.</small></a> <a target="_self" tabindex="-1" aria-disabled="true" href="#" class="list-group-item flex-column align-items-start disabled list-group-item-action disabled">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Disabled List group item</h5>
<small class="text-muted">3 days ago</small></div>
<p class="mb-1"> Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. </p>
<small class="text-muted">Donec id elit non mi porta.</small></a></div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-list-group</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">active</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-column align-items-start"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex w-100 justify-content-between"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">h5</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-1"</span>&gt;</span>List group item heading<span class="hljs-tag">&lt;/<span class="hljs-name">h5</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">small</span>&gt;</span>3 days ago<span class="hljs-tag">&lt;/<span class="hljs-name">small</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-1"</span>&gt;</span>
      Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
    <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">small</span>&gt;</span>Donec id elit non mi porta.<span class="hljs-tag">&lt;/<span class="hljs-name">small</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-column align-items-start"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex w-100 justify-content-between"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">h5</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-1"</span>&gt;</span>List group item heading<span class="hljs-tag">&lt;/<span class="hljs-name">h5</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">small</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-muted"</span>&gt;</span>3 days ago<span class="hljs-tag">&lt;/<span class="hljs-name">small</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-1"</span>&gt;</span>
      Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
    <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">small</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-muted"</span>&gt;</span>Donec id elit non mi porta.<span class="hljs-tag">&lt;/<span class="hljs-name">small</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-column align-items-start"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex w-100 justify-content-between"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">h5</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-1"</span>&gt;</span>Disabled List group item<span class="hljs-tag">&lt;/<span class="hljs-name">h5</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">small</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-muted"</span>&gt;</span>3 days ago<span class="hljs-tag">&lt;/<span class="hljs-name">small</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-1"</span>&gt;</span>
      Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
    <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">small</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-muted"</span>&gt;</span>Donec id elit non mi porta.<span class="hljs-tag">&lt;/<span class="hljs-name">small</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group</span>&gt;</span></pre></figure>
<!-- Component reference added automatically from component package.json -->

<h2 id="component-reference" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">组件引用<a href="../../../bootstrap-vue/docs/components/list-group#component-reference" class="anchorjs-link" aria-labelledby="component-reference" target="_self"></a></span></h2>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-list-group" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-list-group&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/list-group#comp-ref-b-list-group" class="anchorjs-link" aria-labelledby="comp-ref-b-list-group" target="_self"></a></span></h3>
<a data-v-866a22e8="" rel="noopener" target="_blank" href="https://vuejs.org/v2/guide/render-function.html#Functional-Components" class="badge badge-secondary"> 功能部件</a></div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/list-group/list-group.js" class="btn btn-outline-secondary btn-sm"> View source </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-list-group-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-list-group&gt;</code> 属性 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-list-group-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/list-group#comp-ref-b-list-group-props" class="anchorjs-link" aria-labelledby="comp-ref-b-list-group-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__2174">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="tag" class="" id="__BVID__2174__row_tag">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tag</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'div'</code></td>
<td aria-colindex="4" role="cell" class="">指定要呈现的HTML标记，而不是默认标记</td>
</tr>
<tr role="row" data-pk="flush" class="" id="__BVID__2174__row_flush">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">flush</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，呈现没有左边框和右边框的刷新列表组</td>
</tr>
<tr role="row" data-pk="horizontal" class="" id="__BVID__2174__row_horizontal">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">horizontal</code></td>
<td aria-colindex="2" role="cell" class="">Boolean or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，水平而不是默认的垂直渲染列表组</td>
</tr>
</tbody>
</table>
</div>
</article>
</section>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-list-group-item" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-list-group-item&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/list-group#comp-ref-b-list-group-item" class="anchorjs-link" aria-labelledby="comp-ref-b-list-group-item" target="_self"></a></span></h3>
<a data-v-866a22e8="" rel="noopener" target="_blank" href="https://vuejs.org/v2/guide/render-function.html#Functional-Components" class="badge badge-secondary"> 功能部件 </a></div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/list-group/list-group-item.js" class="btn btn-outline-secondary btn-sm"> View source </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-list-group-item-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-list-group-item&gt;</code> 属性 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-list-group-item-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/list-group#comp-ref-b-list-group-item-props" class="anchorjs-link" aria-labelledby="comp-ref-b-list-group-item-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__2192">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">属性<span class="sr-only"> (单击可升序排序)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="tag" class="" id="__BVID__2192__row_tag">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tag</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'div'</code></td>
<td aria-colindex="4" role="cell" class="">指定要呈现的HTML标记，而不是默认标记</td>
</tr>
<tr role="row" data-pk="action" class="" id="__BVID__2192__row_action">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">action</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">设置后，使项目具有动作的外观。使用道具“to”、“ref”或“button”时不需要</td>
</tr>
<tr role="row" data-pk="button" class="" id="__BVID__2192__row_button">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">button</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">如果为true，则将列表组项呈现为按钮元素</td>
</tr>
<tr role="row" data-pk="variant" class="" id="__BVID__2192__row_variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">将一个引导主题颜色变体应用于组件</td>
</tr>
<tr role="row" data-pk="href" class="" id="__BVID__2192__row_href">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">href</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">表示标准a链接的链接的目标URL</td>
</tr>
<tr role="row" data-pk="rel" class="" id="__BVID__2192__row_rel">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">rel</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">设置呈现链接的“rel”属性</td>
</tr>
<tr role="row" data-pk="target" class="" id="__BVID__2192__row_target">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">target</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'_self'</code></td>
<td aria-colindex="4" role="cell" class="">设置呈现链接的“target”属性</td>
</tr>
<tr role="row" data-pk="active" class="" id="__BVID__2192__row_active">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">active</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">当设置为“true”时，使用活动样式将组件置于活动状态</td>
</tr>
<tr role="row" data-pk="disabled" class="" id="__BVID__2192__row_disabled">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">disabled</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">当设置为“true”时，将禁用组件的功能并将其置于禁用状态</td>
</tr>
<tr role="row" data-pk="to" class="" id="__BVID__2192__row_to">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">to</code></td>
<td aria-colindex="2" role="cell" class="">String or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">
  路由器链接属性：表示链接的目标路由。单击时，to prop的值将在内部传递给router.push（），因此该值可以是字符串或位置描述符对象</td>
</tr>
<tr role="row" data-pk="append" class="" id="__BVID__2192__row_append">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">append</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">路由器链接属性：设置附加属性总是将相对路径附加到当前路径</td>
</tr>
<tr role="row" data-pk="replace" class="" id="__BVID__2192__row_replace">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">replace</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">
  路由器链接属性：设置替换属性将在单击时调用“router.replace（）”，而不是“router.push（）”，因此导航不会留下历史记录</td>
</tr>
<tr role="row" data-pk="event" class="" id="__BVID__2192__row_event">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">event</code></td>
<td aria-colindex="2" role="cell" class="">String or Array</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'click'</code></td>
<td aria-colindex="4" role="cell" class="">路由器链接属性：指定触发链接的事件。在大多数情况下，您应该将其保留为默认值</td>
</tr>
<tr role="row" data-pk="active-class" class="" id="__BVID__2192__row_active-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">active-class</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">
  路由器链接属性：配置当链接处于活动状态时应用的活动CSS类。通常您需要将其设置为类名“active”</td>
</tr>
<tr role="row" data-pk="exact" class="" id="__BVID__2192__row_exact">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">exact</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">
  路由器链接属性：默认的活动类匹配行为是包含匹配。设置此属性将强制模式与路线完全匹配</td>
</tr>
<tr role="row" data-pk="exact-active-class" class="" id="__BVID__2192__row_exact-active-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">exact-active-class</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">
  路由器链接属性：配置当链接处于活动状态时应用的活动CSS类，精确匹配。通常您需要将其设置为类名“active”</td>
</tr>
<tr role="row" data-pk="router-tag" class="" id="__BVID__2192__row_router-tag">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">router-tag</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'a'</code></td>
<td aria-colindex="4" role="cell" class="">
  路由器链接属性：指定要呈现的标记，它仍将侦听用于导航的单击事件“路由器标记”转换为最终呈现路由器链接上的标记属性。通常应该使用默认值</td>
</tr>
<tr role="row" data-pk="no-prefetch" class="" id="__BVID__2192__row_no-prefetch">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-prefetch</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">
  nuxt link prop：为了提高nuxt.js应用程序的响应性，当链接显示在视区内时，nuxt.js将自动预取被拆分的代码页。设置“无预取”将禁用特定链接的此功能</td>
</tr>
</tbody>
</table>
</div>
<div data-v-866a22e8="" class="alert alert-info">
<p data-v-866a22e8="" class="mb-0 small">
  <code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-list-group-item&gt;</code> 支持生成
  <code data-v-866a22e8="" translate="translate" class="notranslate">&lt;router-link&gt;</code>或
  <code data-v-866a22e8="" translate="translate" class="notranslate">&lt;nuxt-link&gt;</code>组件（如果使用nuxt.js）。
  有关路由器链接（或nuxt链接）特定属性的更多详细信息，请参阅<a data-v-866a22e8="" href="../../../bootstrap-vue/docs/reference/router-links" class="alert-link" target="_self">Router support</a>路由器支持参考部分。
</p>
</div>
</article>
<h3 id="importing-individual-components" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">导入单个组件<a href="../../../bootstrap-vue/docs/components/list-group#importing-individual-components" class="anchorjs-link" aria-labelledby="importing-individual-components" target="_self"></a></span></h3>
<p>可以通过以下命名导出将各个组件导入到项目中：</p>
<div class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__2223">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">组成部分</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">命名导出</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-list-group&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BListGroup</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-list-group-item&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BListGroupItem</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>例子:</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { BListGroup } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.component(<span class="hljs-string">'b-list-group'</span>, BListGroup)</pre></figure>
</article>
<article class="bd-content">
<h3 id="importing-as-a-plugin" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">作为Vue.js插件导入<a href="../../../bootstrap-vue/docs/components/list-group#importing-as-a-plugin" class="anchorjs-link" aria-labelledby="importing-as-a-plugin" target="_self"></a></span></h3>
<p>这个插件包括上面列出的所有独立组件。插件还包括任何组件别名。</p>
<div class="table-responsive-sm">
<table fileds="namedExport,importPath" role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped b-table-caption-top" id="__BVID__2234">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">Named Export</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">Import Path</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">ListGroupPlugin</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>例子:</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { ListGroupPlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(ListGroupPlugin)</pre></figure>






</main>
</div>
</div>


<script src="../../../v4/assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../../v4/dist/js/popper.min.js"></script> 
<script src="../../../v4/dist/js/bootstrap.min.js"></script> 
<script src="../../../v4/assets/js/docs.min.js"></script> 
<script src="../../../v4/assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../../../v4/assets/js/docsearch.min.js"></script> 
<script>
  docsearch({
    appId: 'PRR89ISST8',
    apiKey: '95044d57d4d7bb744f322d1f18ed607f',
    indexName: 'z01-bootstrapV4',
    inputSelector: '#search-input',
    handleSelected: function (input, event, suggestion) {
      var url = suggestion.url;
      url = suggestion.isLvl1 ? url.split('#')[0]: url;
      // If it's a title we remove the anchor so it does not jump.
      window.location.href = url;
    },
    transformData: function (hits) {
      return hits.map(function (hit) {
        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
        return hit;
      });
    },
    debug: false // Set debug to true if you want to inspect the dropdown
  });
</script> 
<script>
  Holder.addTheme('gray', {
    bg: '#777',
    fg: 'rgba(255,255,255,.75)',
    font: 'Helvetica',
    fontweight: 'normal'
  });
</script>
</body>
</html>
